<template>
 <div>
   <el-container class="ctner" :class="{'folded':folded}">
  <el-header><strong>什锦社区后台管理</strong>

  <span @click="drawer = true" type="primary" style="float:right;line-height:0px;font-size:24px;">
    <el-badge :value="value" class="item"><i class="el-icon-message-solid"></i></el-badge>
  </span>

  </el-header>
  <el-container>
    <el-aside width="300px">
      <span class="btn_fold" @click="folded=!folded">
        <i :class="folded?'el-icon-s-fold':'el-icon-s-unfold'"></i>
        </span>
      <el-menu
      default-active="2"
      :collapse="folded"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
      </el-aside>
    <el-main>Main
      123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
      123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
      123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
      123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </el-main>
  </el-container>
</el-container>
<el-drawer
  title="消息"
  :visible.sync="drawer"
  :direction="direction"
  :append-to-body="true"
  class="aside_msg">

  <el-collapse v-model="activeNames" accordion @change="handleChange">

   <el-collapse-item v-for="message in messages" :key="message.id" :name="message.id">
    <template slot="title" >
      {{ message.name }}<i class="header-icon el-icon-info"></i>
      <span class="time"><el-badge :is-dot="'0'=== message.isDot" class="notice">{{ formatDate(Date.parse(message.time)) }}</el-badge></span>
    </template>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ message.content }}</div>
  </el-collapse-item>

</el-collapse>
</el-drawer>

 </div>
</template>

<script>
 export default {
   name: 'UserIndex',
   data () {
     return {
      folded: true,
      drawer: false,
      direction: 'rtl',
      value: 1,
      messages:[{"id":"1","name":"你好","content":"你好呀","time":"2020-7-18 19:12:34","isDot":"1"},
      {"id":"3","name":"你好","content":"你好呀","time":"2020-7-18 19:12:34","isDot":"0"}],
      activeNames: '0',
      name:'1',
      is_dot:true,
     }
   },
   props: [],
   components: {

   },
   created () {},
   mounted () {},
   methods: {
    getNowTime() {
      let dateTime
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
        :
        new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
        :
        new Date().getSeconds()
      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      console.log(dateTime)
      return dateTime
    },
    formatDate(timestamp) {
    // 补全为13位
    let arrTimestamp = (timestamp + '').split('');
    for (let start = 0; start < 13; start++) {
      if (!arrTimestamp[start]) {
        arrTimestamp[start] = '0';
      }
    }
    timestamp = arrTimestamp.join('') * 1;
    let minute = 1000 * 60;
    let hour = minute * 60;
    let day = hour * 24;
    let month = day * 30;
    let now = new Date().getTime();
    let diffValue = now - timestamp;
    // 如果本地时间反而小于变量时间
    if (diffValue < 0) {
      return '不久前';
    }
    // 计算差异时间的量级
    let monthC = diffValue / month;
    let weekC = diffValue / (7 * day);
    let dayC = diffValue / day;
    let hourC = diffValue / hour;
    let minC = diffValue / minute;
    // 数值补0方法
    let zero = function (value) {
      if (value < 10) {
        return '0' + value;
      }
      return value;
    };
    // 使用
    if (monthC > 4) {
      // 超过1年，直接显示年月日
      return (function () {
        let date = new Date(timestamp);
        return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
      })();
    } else if (monthC >= 1) {
      return parseInt(monthC) + '月前';
    } else if (weekC >= 1) {
      return parseInt(weekC) + '周前';
    } else if (dayC >= 1) {
      return parseInt(dayC) + '天前';
    } else if (hourC >= 1) {
      return parseInt(hourC) + '小时前';
    } else if (minC >= 1) {
      return parseInt(minC) + '分钟前';
    }
    return '刚刚';
  },
  handleChange(val) {
        let item = this.messages.find(item => {
            return item.id == val;
        });
        if(item !== undefined && item.isDot!=='1' && item.isDot !==1){
          item.isDot=1;
          console.log("change")
        }

        console.log(item);
  }


   }
 }
</script>

<style lang="scss" scoped>
$h_height: 60px;
  .el-header {
    background-color: #fff;
    line-height: #{$h_height};
    text-align: left;
    box-shadow: 0px 10px 7px #cecece;
    color: #333;
    position: fixed;
    width: 100%;
    height: #{$h_height};
  }

  .el-aside {
    background-color: #545c64;
    position: fixed;
    top: #{$h_height};
    left: 0px;
    text-align: left;
    height: calc(100vh - #{$h_height});
    transition: width 0.3s;
    -webkit-transition: width 0.3s;
  }

  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: left;
    /* height: calc(100vh - #{$h_height}); */
    margin: #{$h_height} 0px 0px 300px;
    transition: margin-left 0.3s;
    -webkit-transition: margin-left 0.3s;
  }

  .el-menu{
    border-right: 0px;
  }

  .folded .el-menu span{
    display: none;
  }

  .folded .el-aside{
    width: 64px !important;
  }

  .folded .el-main{
    margin-left: 64px;
  }

  .btn_fold{
    display: block;
    width: 100%;
    height: 30px;
    position: fixed;
    width: 300px;
    bottom: 0px;
    background-color: #3c4752;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    z-index: 9;
    transition: width 0.3s;
    -webkit-transition: width 0.3s;
  }
  .folded .btn_fold{
    width: 64px;

  }

  .aside_msg{
    text-align: left;
    margin: 20px 20px 20px 0px;
    border-radius: 10px;
  }

  .item{
    margin-top: 20px;
  }

  .time{
    float: right;
    margin: 0px 0px 0px auto;
  }

  .notice {
  margin-top: 0px;
  margin-right: 40px;
  display: inline;
  }

  .aside_msg >>> .el-collapse-item__arrow{
    display: none;
  }

  .aside_msg >>>.el-drawer__open .el-drawer.rtl{
    border-radius: 10px;
  }


</style>

